<template>
	<el-drawer
		v-model="props.open"
		title="调整顺序"
		direction="rtl"
		:before-close="handleClose"
		:size="350"
		:modal="false"
		close-on-click-modal
		close-on-press-escape
		destroy-on-close
	>
		<div style="height: 70vh; overflow: scroll">
			<Draggable v-model="data.data" animation="300" @change="getEnd">
				<template #item="{ element, index }">
					<div class="sort">
						<el-image v-if="element.sortImg" :src="element.sortImg" class="sort_img" fit="contain"></el-image>
						<text>{{ element.sortName }}</text>
					</div>
				</template>
			</Draggable>
		</div>
		<el-divider />
		<div style="display: flex; justify-content: center">
			<el-button type="primary" class="button" @click="submit" style="width: 40%">
				<el-icon class="el-icon--right"><ArrowLeft /></el-icon>生成预览</el-button
			>
			<el-button class="button" @click="handleClose" style="width: 40%"> 返回</el-button>
		</div>
	</el-drawer>
</template>

<script setup lang="ts" name="netxTable">
import { watch, nextTick, ref } from 'vue';
import { ElMessage } from 'element-plus';
import Draggable from 'vuedraggable';

const props = defineProps({
	// 列表内容
	open: {
		type: Boolean,
		default: () => false,
	},
	data: {
		type: Array,
		default: () => [],
	},
});

const emit = defineEmits(['submit', 'handleClose']);
const data = ref();
watch(
	() => props.data,
	(val) => {
		data.value = JSON.parse(JSON.stringify(val));
		console.log('🚀 ~ file: index.vue:56 ~ 	data.value :', data.value);
	}
);

function getEnd(val) {}

function handleClose() {
	emit('handleClose');
}

function submit() {
	if (data.value.list) {
		data.value.list = data.value.data;
	}
	emit('submit', data.value);
}
</script>

<style scoped lang="scss">
.sort {
	width: 80%;
	height: 80px;
	box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.3);
	display: flex;
	align-items: center;
	margin: 20px;
	padding: 10px;
	background-color: white;
	border-radius: 10px;
	cursor: pointer;
	.sort_img {
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}
}
</style>
